<template>
  <div class="login">
    <!-- <div class="header">
      <div class="header-logo"></div>
      <div class="title">护士小鹿后台管理系统</div>
    </div> -->
    <div class="content">
      <!-- <div class="content-img">
        <img
          src=""
          alt=""
          v-lazy="
            'https://img2.baidu.com/it/u=2276234928,1590959663&fm=26&fmt=auto'
          "
        />
      </div> -->
      <div class="login-wrap">
        <div class="login-title">账号登录</div>
        <a-form ref="loginRef" :model="form" :rules="loginRules" :hideRequiredMark="true" :label-col="labelCol">
          <a-form-item label="账号" name="phone" has-feedback>
            <a-input placeholder="请输入手机号" v-model:value.trim="form.phone"></a-input>
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value.trim="form.password" placeholder="请输入密码" />
          </a-form-item>
        </a-form>
        <!-- 自动登录，忘记密码 -->
        <div class="login-wrap-bottom" @click="autoLogin">
          <a-checkbox v-model:checked="checked" class="auto-login">自动登录</a-checkbox>
          <!-- <div class="forget-password" @click="forgetPassword">忘记密码?</div> -->
        </div>
        <!-- 登录 -->
        <div class="login-btn">
          <a-button type="primary" @click="login" :loading="loading" class="d-c-center">{{ loadingtext }}</a-button>
        </div>
      </div>
    </div>
    <!-- <a-row style="margin-top: 50px">
      <a-col :span="8" :offset="8" style="color: #fff">
        版权及最终解释权归小鹿科技有限公司所有
      </a-col>
    </a-row> -->
  </div>
</template>
<script>
import { reactive, ref, h } from 'vue'
import { login } from '@/api/login/index.js'
import { validatorPass, validtorConfirmPass, validatorPhone } from '@/assets/js/validate'
import { useRouter } from 'vue-router'
import { userLogin } from '@/api/login/index'
// import {useRouter} from 'vue-router';
import { message, notification } from 'ant-design-vue'
import { useStore } from 'vuex'

import { asyncRoutes } from '@/router'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const checked = ref(false) //是否自动登录
    const loading = ref(false) //是否显示登录加载中

    const loadingtext = ref('登录') //登录文字
    const loginRef = ref('')

    let row = ref(10)
    const disabled = ref(false)

    const form = reactive({
      phone: '',
      password: ''
    })

    const loginRules = reactive({
      phone: [
        {
          required: true,
          validator: validatorPhone,
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          validator: validatorPass,
          trigger: 'blur'
        }
      ]
    })

    // 用户登录
    const login = () => {
      loginRef.value
        .validate()
        .then(async () => {
          loading.value = true
          loadingtext.value = '登录中……'

          let res = await userLogin({
            account: form.phone,
            password: form.password,
            uuid: Math.floor(Math.random(0, 1) * 10000)
          })

          console.log(res, '登录结果是')
          if (res.success) {
            // 存储用户账号
            store.commit('setAccount', form.phone)
            store.dispatch('setLoginInfo', res.object)
            notification.success({
              message: '登录成功~',
              duration: 2
            })

            // 跳转到登录首页，此时要获取用户权限、在store中写、动态生成路由吧要
            setTimeout(() => {
              form.phone = ''
              form.password = ''
              router.push({
                path: '/home'
              })
            }, 400)
          } else {
            notification.error({
              message: '登录失败，请稍后再试',
              duration: 2
            })
          }
          loading.value = false
          loadingtext.value = '登录'
        })
        .catch(error => {
          console.log('error', error)
        })
    }

    const forgetPassword = () => {
      router.push({
        path: '/forget'
      })
    }

    // 自动登录
    const autoLogin = () => {}
    return {
      checked,
      loading,
      loadingtext,
      form,
      loginRules,
      loginRef,
      row,
      disabled,
      login,
      forgetPassword,
      autoLogin,
      labelCol: {
        style: {
          color: '#ffffff',
          fontWeight: 'bolder'
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.title() {
  font-size: 20px;
  font-weight: bold;
}

.login {
  background: url('../assets/img/bg.jpg') no-repeat;
  background-size: 100% 100%;
  backdrop-filter: blur(5px);
  height: 100vh;

  display: flex;
  align-items: center;

  .header {
    height: 200px;
    display: flex;
    align-items: center;
    padding: 0px 30px;
    background-color: red;

    .header-logo {
      width: 25%;
      height: 100px;
      background-color: tomato;
    }

    .title {
      margin-left: 50px;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
  }

  .content {
    width: 100%;
    display: flex;
    // padding-left: 30px;
    justify-content: center;
    align-content: center;

    .content-img {
      width: 60%;
      height: 300px;
      color: #fff;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .login-wrap {
      padding: 30px 60px 30px 70px;
      // margin-right: 50px;
      border: solid 1px rgb(235, 237, 240, 0.5);
      color: #fff;

      .login-title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 20px;
      }

      .login-wrap-bottom {
        display: flex;
        justify-content: space-between;

        .auto-login {
          font-size: 12px;
        }

        .forget-password {
          font-size: 13px;
        }
      }
    }
  }
}

// 登录按钮
.login-btn .ant-btn {
  width: 100% !important;
  margin-top: 30px;
}
</style>
